<template>
  <div id="unit">
 
      <criteria-paged :model="model" v-ref:paged  @sort="sort">
        <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
         <div novalidate class="form-inline" partial>

           <div class="form-group">
             <input  type="text" class="form-control" v-model="model.f_userinfo_id" placeholder='用户编号'
             condition="f_userinfo_id = '{}'"
             :size="model.f_userinfo_id ? model.f_userinfo_id.length : 4">
           </div>
           <div class="form-group">
             <input  type="text" class="form-control" v-model="model.f_user_name" placeholder='用户姓名'
             condition="f_user_name like '{}'"
             :size="model.f_user_name ? model.f_user_name.length : 4">
           </div>
           
           <div class="form-group">
            <datepicker id="startdate"
            placeholder="开始日期"
            v-model="model.f_hand_date"
            :value.sync="model.f_hand_date"
            condition="f_hand_date >='{}'"
            :format="'yyyy-MM-dd'"
             :disabled-days-of-Week="[]"
            width="100%">
          </div>
          <div class="form-group">
           <datepicker id="startdate"
           placeholder="结束日期"
           v-model="model.f_hand_date1"
           :value.sync="model.f_hand_date1"
           condition="f_hand_date <='{}'"
           :format="'yyyy-MM-dd'"
            :disabled-days-of-Week="[]"
           width="100%">
         </div>
            <div class="form-group">
              <v-select :value.sync="model.f_handed" v-model="model.f_handed" :options='$parent.$parent.handed' placeholder='是否抄表'
              condition=" f_handed='{}'"   close-on-select clear-button>
              </v-select>
           </div>
           <div class="form-group">
             <button class="btn btn-success active" @click="$parent.$parent.search()" v-el:cba>查询</button>
           </div>
         </div>
        </criteria>
        <data-grid  :model="model" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
               <th>序号</th>
               <th>用户信息</th>
               <th>上次抄表底数</th>
               <th>本次抄表底数</th>
               <th>本次用气量</th>
               <th>抄表日期</th>
               <th>剩余气量</th>
               <th>表付费类型</th>
               <th>电量等级</th>
               <th>信号强度</th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_userinfo_id}}&nbsp;&nbsp;{{row.f_user_name}}&nbsp;&nbsp;{{row.f_address}}</td>
            <td style="text-align:center">{{row.f_last_tablebase}}</td>
            <td style="text-align:center">{{row.f_tablebase}}</td>
            <td style="text-align:center">{{row.f_meter_gas}}</td>
            <td style="text-align:center">{{row.f_hand_date}}</td>
            <td style="text-align:center">{{row.f_remainquantity}}</td>
            <td style="text-align:center">{{row.f_wmprepaytype}}</td>
            <td style="text-align:center">{{row.f_electricity}}</td>
            <td style="text-align:center">{{row.f_signal}}</td>
          </template>
        <template partial='foot'>
          <td style="text-align:center">总计</td>
          <td style="text-align:center"></td>
          <td style="text-align:center"></td>
          <td style="text-align:center"></td>
          <td style="text-align:center"></td>
          <td style="text-align:center"></td>
          <td style="text-align:right">共计:</td>
          <td style="text-align:center"> {{model.count}}&nbsp;&nbsp; 户</td>
            <td style="text-align:right">总用气量:</td>
        <td style="text-align:center"> {{model.totalgas}} &nbsp;&nbsp;方</td>

        </template>
      </data-grid>
      </criteria-paged>
    </div>
</template>

<script>
/**
*阶梯水价查询列表
*/
import { PagedList } from 'vue-client'
import * as Util from '../Util'
import co from 'co'

let getTotalGas = function * (self) {
  yield self.$SqlService.getTotalGas(self.model) .then(
      (res) => {
        self.$set('model.totalgas', res.data[0].f_meter_gas)
      }
    )
}

export default {
  title: '抄表查看',
  data () {
    return {
      gasmodel: {
        totalgas: 0
      },
      model: new PagedList('rs/sql/getHandPlan', 20)
    }
  },
  // props: {
  //   items: {
  //     type: String,
  //     default: '*'
  //   }
  // },
  ready () {
    this.search()
  },
  methods: {
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    getgas () {
      let gen = getTotalGas(this)
      return co(gen)
    },
    selfSearch (args) {
      if (!Util.f.parent.parent.name.includes('统一资源管理')) {
        args.condition = `${args.condition} and f_filiale = '${Util.f.f_fengongsi}'`
      }
      this.model.search(args.condition, args.model)
    }
  },
  // watch: {
  //   'model' (val) {
  //     if (val.model.f_meter_gas) {
  //
  //     }
  //   }
  // },
  computed: {
    handed () {
      return [{label: '全部', value: ''},
              {label: '未抄表', value: '未抄表'},
              {label: '已抄表', value: '已抄表'}]
    },
    prepayType () {
      return [{label: '全部', value: ''},
              {label: '预付费', value: '预付费'},
              {label: '后付费', value: '后付费'}]
    }
  }
}

</script>
